聯系我們
導讀：發布會謝幕了，媒體們也發完了新聞稿，朋友圈也熱鬧過了，接下來的工作該輪到設計師了。iphone X 11月才發貨，但你也許已經接到設計任務了。在這之前，讓我們先來看看這個iphoneX，對UI
發表日期：2019-03-21
文章編輯：興田科技
瀏覽次數：10001
標簽：
發布會謝幕了，媒體們也發完了新聞稿，朋友圈也熱鬧過了，接下來的工作該輪到設計師了。iphone X 11月才發貨，但你也許已經接到設計任務了。在這之前，讓我們先來看看這個iphoneX，對UI設計師的日常工作有什么影響。
新增的虛擬 Home 指示條——你不得不考慮的設計元素之一
iphone X 邁向了全面屏，移除了原本在手機底部的實體Home鍵，取而代之的是一條 134x 5pt 的虛擬Home指示條。
「底端上劃」成為了全局性的系統操作，它可以讓你返回桌面（原本的單擊Home鍵），或者切換應用程序（原本雙擊Home 鍵）。我將這個虛擬Home指示條的特性總結為以下五點：
特性一：如影隨形
蘋果在新的開發文檔中指出，這個 Home 指示條是「至關重要的系統元素」，除了在某種特殊條件下，這個指示條將永遠伴隨著你的 App，成為強制的設計元素出現在屏幕中。這就意味著，在你的 App 設計中你將不得不為它保留位置，并考慮好周圍元素與它的兼容關系。
特性二：黑白條
這個虛擬 Home 指示條只有亮/暗兩種模式，它會自動根據周圍背景，選擇將自己變身成白色或是黑色，從而盡可能地和周圍背景有所區分。
特性三：全面屏
iOS 自帶的通訊錄是一個典型的帶有底部導航欄的 App，對比 iphone 8 和 iphone X，你會發現在 iphone X 上，底部導航欄并不在真正的「底部」，它是懸浮在虛擬 Home 條上方的。對擁有底部導航欄的 App 而言，iphone X 這個全面屏的「下巴」并非可用區域，它并不真的「全面」。
但同時，Apple 的設計則例中也指出，如果 App 的底部是可滾動的內容（比如一個長列表視圖），那么官方給出的建議是：放心大膽地霸占整個屏幕吧！發現文字和 Home 指示條重疊了？沒關系！這是官方推薦的正確做法！事實上，用戶依然可以點選下方的列表條目。這種情況下，全面屏才是真的「全面」了。
美國著名的股票交易軟件 Robinhood 就使用了類似的交互。在買入/賣出股票這樣的關鍵操作里，它使用了「底部上劃」。盡管不是嚴格意義上的「底端上劃」，但虛擬 Home 指示條的介入無疑增加了誤操的機率。在 iphone X 設計時，類似這樣涉及到屏幕底部上下滑動的交互都需要更謹慎的思考、更嚴格的測試。
當然，iphone X 并沒有強制禁止這種交互操作。它給開發者們留了一條路：「在萬不得已必須要這樣做的情況下」，開發者可以開啟「邊緣保護」功能（Edge protection）。開啟后，次底端上劃將只是喚醒 Home 指示條，再次上劃才會激活原有功能。
特性五：自動隱身
在播放視頻時，開發者可以開啟虛擬 Home 條「自動隱藏」功能從而獲得沉浸式體驗。開啟后，視頻播放時虛擬 Home 條將自動消失；單擊屏幕后就又會出現。
「安全區」——這詞兒怎么聽起來有點耳熟？
看著新的 iOS 設計規范文檔，一個陌生又熟悉的詞浮現在我的腦海中——出血（Bleed）?。?！
在平面印刷設計中，為了顧及之后紙張裁切過程中可能出現的誤差，設計師會在畫布四周留出的一點邊緣空間，這一圈額外的空間就叫做「出血」。同時，設計師一般也會設置一個「安全區」，確保設計稿中的重要內容都出現在安全區內。
對數字化時代下的 UI 設計師來說，我們本可以永遠把「出血」和「安全區」的概念永遠拋之腦后，因為屏幕不用裁切！全世界也許 99.99% 的手機屏都是規整的矩形，我們的安全區就是整塊矩形屏（安卓系統底部的虛擬按鍵可以近似理解為屏幕外，設計時可以忽略）。然而 iphone X 這個妖蛾子的出現，又迫使我們重新找回那個久遠的記憶……
讓我們來看看蘋果定義的 iphone X 設計「安全區」吧：
縱向持握狀態下的安全區設計還比較容易理解，但到了橫向持握狀態，安全區的概念就有點反直覺了：
橫向狀態下（假設是逆時針旋轉 90 度），原本的「劉?！共糠值搅俗髠?，「出血」部分實際占用面積不變，而盡管虛擬 Home 條挪到了下方的長邊上，屏幕右邊雖然沒有任何系統及元素，但蘋果依然建議將其設置為與左側「劉?！瓜鄬ΨQ的「出血」。也就是說，在橫向狀態下，你的安全區是個半島，只有上方是連接到屏幕邊緣的。這又是為什么呢？為什么蘋果官方不建議設計師充分利用右邊的空白面積呢？為什么非要左右對稱地設置「出血」呢？尤其考慮到對于很多手機游戲來說，任何一點屏幕空間都是寶貴的，血條，金錢，操作鍵，小地圖，大地圖等等，太多元素逼著設計師充分利用每一寸空間了。
蘋果官方給出的解釋是，由于你無法預測用戶在橫向持握下會把「劉?！狗旁谧筮呥€是右邊，如果安全區不是橫向居中放置的，會造成界面中元素與手機邊緣的相對位置不固定。他們認為，用戶在使用手機時（尤其是玩游戲的時候）高度依賴手部的肌肉記憶，不對稱設計盡管空間利用率更高，但與用戶的肌肉記憶相背，由此導致的失敗操作容易讓用戶沮喪。因此，蘋果向廣大設計師們高聲疾呼：請把按鍵全都放到安全區里來吧！
尺寸大了，比例變了，這意味著……
在 iphone X 之前，盡管 iphone SE，7 和 7 plus 的屏幕尺寸大小不同，但都是 16:9 的屏幕。而 iphone X 差不多是個 13:6 的屏幕（812 x 375 pt）。屏幕的絕對尺寸也變大了，從 4.7 寸增大到 5.8 寸——這些對設計來說意味著什么呢？
上一篇：
暫無信息上一篇：
2016年電商流行語大集合！更多新聞
2019
近日，網建科技-建站之星小程序編輯器更新上線，集成微信小程序組件，一鍵生成技術，讓企業商家無需懂技術，懂開發，懂設計，即可打造屬于自己的小程序。然而，對于大部分企業商家來說，雖已
View details
2019
發布會謝幕了，媒體們也發完了新聞稿，朋友圈也熱鬧過了，接下來的工作該輪到設計師了。iphone X 11月才發貨，但你也許已經接到設計任務了。在這之前，讓我們先來看看這個iphoneX，對UI
View details
2020
一個2015年成立的紙尿褲品牌，去年一年靠微商做了7個億銷售額。 乍聽起來是不是像某廠家的營銷軟文？說實話，小編的第一反應也是不信的：7個億，這個數字完全可以進入紙尿褲第二一個2
View details
2019
網絡流行語，是最重要的年終盤點之一。之所以有如此大的魅力，是因為在每一個調侃，每一個吐槽，背后卻承載著許多人的歡樂悲喜。（一本正經胡說八道）但是在什么事都要參一腳的電商行業
View details
